import React from 'react';

class PlayVideo extends React.Component {

    constructor(props) {
        super(props);
        this.state = { imgUrl: this.props.cover, btnShow: true };
    }

    startPlay = () => {
        this.setState({
            imgUrl: this.props.gif,
            btnShow: false
        })
        const audioElement = document.querySelector("#" + this.props.id);
        setTimeout(() => {
            audioElement.play();
        }, 500)
        audioElement.onended = () => {
            setTimeout(() => {
                this.setState({
                    imgUrl: this.props.cover,
                    btnShow: true
                })
            }, 2000)
        }

    }

    render() {
        return (<div onClick={this.startPlay} style={{ display: 'inline-block', position: 'relative', width: '100px', marginLeft: '50px',border:'2px solid #ccc' }}>
            <audio src={this.props.src} id={this.props.id}></audio>
            <span style={{ display: this.state.btnShow ? 'flex' : 'none', justifyContent:'center',position: 'absolute', top: 'calc(50% - 15px)', left: 'calc(50% - 15px)', width: '35px', height: '35px', lineHeight: '35px', borderRadius: '50%', background: '#000', textAlign: 'center'}}>
                <svg t="1650901416588" style={{ width: '20px', heigth: '20px' }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5473" ><path d="M324.085 95.787l500.422 300.664c82.373 50.453 79.284 136.946-1.030 186.37v0l-506.6 304.784c-41.187 23.683-87.522 37.068-131.798 9.267-36.037-22.653-46.335-58.691-46.335-97.819v-616.774c0-39.127 13.386-75.166 48.395-97.819 45.305-27.801 94.731-14.416 136.946 11.327v0z" p-id="5474" fill="#ffffff"></path></svg>
            </span>
            <img src={this.state.imgUrl} style={{ width: '100px' }} id={this.props.imgId} />
        </div>)
    }

}

PlayVideo.defaultProps = {
    width: '20px',
    height: '20px',
    id: `audio${new Date().getTime()}`,
    imgId: `img${new Date().getTime()}`
}

export default PlayVideo;